<template>
    <el-card class="goods-container">
        <div class="card-container">
            <el-image class="food-cover" :src="props.data.cover"></el-image>
            <div class="food-info">
                <h3 class="food-name">{{ props.data.name }}</h3>
                <el-text>{{ props.data.description }}</el-text>
                <p>
                    单价：{{ props.data.price }}
                </p>
            </div>
            <div>
                <el-input-number :min="0" v-model="data.number" @change="changeHandler"/>
            </div>
        </div>
    </el-card>
</template>

<script setup>
import {reactive} from "vue";
import {useStore} from "vuex";
const store = useStore();
const props = defineProps({
    data: {type: Object}
});
const data = reactive({
    goodsId: 0,
    number: 0
})
function changeHandler() {
    store.dispatch("Goods/addFood",{goodsId:props.data.id,number:data.number})
}
</script>

<style scoped>
.goods-container{
    margin: 8px;
}
.food-cover{
    width: 300px;
    height: 200px;
}
</style>